<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.resizable - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

#ex1 {
	width: 600px;
	height: 200px;
	background: #fff6d5;
	overflow: hidden;
	line-height: 1em;
	font-size: 0.8em;
}

#ex1 > p { margin: 1em; }

#ex2 {
	width: 600px;
	height: 200px;
	background: #fff6d5;
	overflow: hidden;
	line-height: 1em;
	font-size: 0.8em;
}

#ex2 > p { margin: 1em; }

</style>

<script>

$(document).ready(function () {

	$('#mkresizable').click(function () {
		$('#ex1').ajp$resizable({ proportional: false })
		$('#ex2').ajp$resizable({ proportional: true })
		$('#mkresizable').attr('disabled', true)
		$('#mkunresizable').removeAttr('disabled')
	})

	$('#mkunresizable').click(function () {
		$('#ex1').ajp$unresizable()
		$('#ex2').ajp$unresizable()
		$('#mkunresizable').attr('disabled', true)
		$('#mkresizable').removeAttr('disabled')
	})

	$('#mkresizable').click()
})

</script>

</head>

<body>

	<button id="mkresizable">Make resizable</button>
	<button id="mkunresizable">Unresizable</button>
	<br/>
	<br/>
	<div id="ex1" class="resizable">
		<p>Lorem ipsum dolor sit amet, iriure numquam impedit te has, eum ex tation iisque elaboraret. Natum sonet contentiones ei pro, natum perfecto te eum, cu quo elitr propriae. At duo ipsum appellantur. Ea erat aliquip nec, clita soleat commune eu per.</p>
		<p>Vim graeco laoreet te, sed eu magna assueverit interpretaris. Usu oblique saperet gubergren te, in erat dicunt est. An his graecis placerat, nec accusata mediocrem aliquando te. Ex eum ipsum percipit. Probatus imperdiet consectetuer eu mel, ei his nemore salutatus tincidunt, cu mucius essent duo.</p>
	</div>
	<br/>
	<div id="ex2" class="resizable">
		<p>Lorem ipsum dolor sit amet, iriure numquam impedit te has, eum ex tation iisque elaboraret. Natum sonet contentiones ei pro, natum perfecto te eum, cu quo elitr propriae. At duo ipsum appellantur. Ea erat aliquip nec, clita soleat commune eu per.</p>
		<p>Vim graeco laoreet te, sed eu magna assueverit interpretaris. Usu oblique saperet gubergren te, in erat dicunt est. An his graecis placerat, nec accusata mediocrem aliquando te. Ex eum ipsum percipit. Probatus imperdiet consectetuer eu mel, ei his nemore salutatus tincidunt, cu mucius essent duo.</p>
	</div>

</body>